<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/shopcar.css">
    <script type="text/javascript">
        (function() {
            var docEl = document.documentElement;


            function setRemUnit() {
                // 获取到rem的基准值
                var rem = docEl.clientWidth / 10;

                // 动态设置html根元素的font-size
                docEl.style.fontSize = rem + 'px';
            }

            setRemUnit();

            // 窗口大小变化时 触发
            window.addEventListener('resize', setRemUnit);

            // 窗口出现在当前屏幕时 （有浏览器兼容性）
            window.addEventListener('pageshow', function(e) {
                if (e.persisted) {
                    setRemUnit();
                }
            });
        })();
    </script>
</head>

<body>

    <!-- <div class="productitem">鸡翅：<span>5</span>元 <button>+</button></div>
        <div class="productitem">可乐：<span>6</span>元 <button>+</button></div>
        <div class="productitem">雪糕：<span>8</span>元 <button>+</button></div> -->

    <div class="right-content" style="height: 300px;overflow: auto;" id="product">




        <!-- <div class="menu-item">
            <img class="img" src="http://p0.meituan.net/xianfuwm/38bbfa3f955cbce3330f1cb6818d0ce6216794.png" />
            <div class="menu-item-right">
                <p class="item-title">鸡翅</p>
                <p class="item-desc">麦辣鸡翅2块（主要原料：鸡肉，腌料，裹粉，油） </p>
                <p class="item-zan">赞7</p>
                <p class="item-price">¥<span class="singlePrice">11.5</span><span class="unit">/例</span></p>
            </div>
            <div class="select-content">
                <div class="minus"></div>
                <div class="count">0</div>
                <div class="plus"></div>
            </div>
        </div>

        <div class="menu-item">
            <img class="img" src="http://p0.meituan.net/xianfuwm/38bbfa3f955cbce3330f1cb6818d0ce6216794.png" />
            <div class="menu-item-right">
                <p class="item-title">鸡腿</p>
                <p class="item-desc">麻辣鸡腿1只（主要原料：鸡肉，腌料，裹粉，油） </p>
                <p class="item-zan">赞7</p>
                <p class="item-price">¥<span class="singlePrice">15.5</span><span class="unit">/例</span></p>
            </div>
            <div class="select-content">
                <div class="minus"></div>
                <div class="count">0</div>
                <div class="plus"></div>
            </div>
        </div>

        <div class="menu-item">
            <img class="img" src="http://p0.meituan.net/xianfuwm/38bbfa3f955cbce3330f1cb6818d0ce6216794.png" />
            <div class="menu-item-right">
                <p class="item-title">鸡爪</p>
                <p class="item-desc">药膳鸡爪1盆（主要原料：鸡脚，药膳原料） </p>
                <p class="item-zan">赞7</p>
                <p class="item-price">¥<span class="singlePrice">20</span><span class="unit">/例</span></p>
            </div>
            <div class="select-content">
                <div class="minus"></div>
                <div class="count">0</div>
                <div class="plus"></div>
            </div>
        </div>

        <div class="menu-item">
            <img class="img" src="http://p0.meituan.net/xianfuwm/38bbfa3f955cbce3330f1cb6818d0ce6216794.png" />
            <div class="menu-item-right">
                <p class="item-title">烧鹅</p>
                <p class="item-desc">烧鹅一只（主要原料：鹅） </p>
                <p class="item-zan">赞7</p>
                <p class="item-price">¥<span class="singlePrice">180</span><span class="unit">/只</span></p>
            </div>
            <div class="select-content">
                <div class="minus"></div>
                <div class="count">0</div>
                <div class="plus"></div>
            </div> -->
    </div>
    <!--购物车区域开始-->
    <div class="shop-bar">
        <div class="choose-content">
            <div class="content-top">
                <div class="clear-car">清空购物车</div>
            </div>

            <div id="shopcartItems">

            </div>
            <!-- <div class="choose-item">
                <div class="item-name">鸡翅</div>
                <div class="price">¥<span class="total" id="singlePrice">11.5</span></div>
                <div class="select-content">
                    <div class="minus"></div>
                    <div class="count">0</div>
                    <div class="plus"></div>
                </div>
            </div> -->

            <div class="bottom-content">
                <div class="shop-icon">
                    <div class="dot-num hide"></div>
                </div>
                <div class="price-content">
                    <p class="total-price">¥<span class="total-price-span">0</span></p>
                    <p class="other-price">另需配送&nbsp;¥<span class="shipping-fee">0</span></p>
                </div>
                <div class="submit-btn">去结算</div>
            </div>

        </div>

        <!--购物车区域结束-->
    </div>


    <script src="./js/jquery.min.js"></script>
    <script>
        function MyObj(name, price, count) {
            this.itemName = name;
            this.price = price;
            this.count = count;
        }

        class Prooduct {
            constructor(title, desc, zan, price) {
                this.itemTitle = title
                this.itemDesc = desc
                this.itemZan = zan
                this.itmePrice = price
            }

        }
        const jsonStr = '[{"itemTitle":"鸡翅","itemDesc":"麦辣鸡翅2块（主要原料：鸡肉，腌料，裹粉，油)","itemZan":7,"itemPrice":11.5},{"itemTitle":"鸡翅","itemDesc":"麦辣鸡翅2块（主要原料：鸡肉，腌料，裹粉，油)","itemZan":7,"itemPrice":11.5},{"itemTitle":"鸡翅","itemDesc":"麦辣鸡翅2块（主要原料：鸡肉，腌料，裹粉，油)","itemZan":7,"itemPrice":11.5}]'
        const productArry = JSON.parse(jsonStr)

        // let shopcarItem = new MyObj("鸡翅", 11.5, 0);
        // let shopcarItem2 = new MyObj("鸡腿", 15.5, 0);
        // let shopcarItem3 = new MyObj("鸡爪", 20, 0);
        // let shopcarItem4 = new MyObj("烧鹅", 180, 0);
        let cartItems = new Array();

        let production = new Array()

        function renderItems() {
            var menu = ` <div class="menu-item">
            <img class="img" src="http://p0.meituan.net/xianfuwm/38bbfa3f955cbce3330f1cb6818d0ce6216794.png" />
            <div class="menu-item-right">
                <p class="item-title">${itemTitle}</p>
                <p class="item-desc">${itemDesc}</p>
                <p class="item-zan">${itemZan}</p>
                <p class="item-price">¥<span class="singlePrice">${itmePrice}</span><span class="unit">/例</span></p>
            </div>
            <div class="select-content">
                <div class="minus"></div>
                <div class="count">0</div>
                <div class="plus"></div>
            </div>
        </div>`
            var htmlStr = ""
            productArry.forEach(function(item) {
                var row = menu.replace('$name', item.itemName)
                    .replace('$price', item.price)
                    .replace('$chooseCount', item.chooseCount)
                htmlStr += menu
            })
            var itemMenu = document.getElementById("product");
            itemMenu.innerHTML = htmlStr;
        }

        // cartItems.push(shopcarItem);
        // cartItems.push(shopcarItem2);
        // cartItems.push(shopcarItem3);
        // cartItems.push(shopcarItem4);
        // function RenderCartItems() {
        //     var tmpl = '<div class="choose-item">' +
        //         '<div class="item-name">$name</div>' +
        //         '<div class="price">¥<span class="singlePrice">$price</span></div>' +
        //         '<div class="select-content">' +
        //         '<div class="minus"></div>' +
        //         '<div class="count">$chooseCount</div>' +
        //         '<div class="plus"></div>' +
        //         '</div></div>';

        //     var innerHtmlstr = "";
        //     cartItems.forEach(function(item) {

        //         var row = tmpl.replace('$name', item.itemName)
        //             .replace('$price', item.price)
        //             .replace('$chooseCount', item.count);

        //         innerHtmlstr += row;

        //     })

        // var itemMenu = document.getElementById("product");
        // var itemsDiv = document.getElementById("shopcartItems");

        // itemMenu.innerHTML = htmlStr;
        // itemsDiv.innerHTML = innerHtmlstr;

        // }

        var plusBtns = document.getElementsByClassName("plus");
        var minusBtns = document.getElementsByClassName("minus");
        var countDivs = document.getElementsByClassName("count");
        var singlePrices = document.getElementsByClassName("singlePrice");
        var itemNames = document.getElementsByClassName("item-title");
        // plusBtns[0].innerText//ok ok ok









        var totalPrice = document.getElementsByClassName("total-price-span")[0];



        function TestShopCart() {
            // const sPrice = Number(singlePrice.innerText);
            // let initCount = localStorage.getItem("mycount");
            // if (!initCount) {
            //     initCount = 0;
            // }
            // for (let i = 0; i < countDivs.length; i++) {
            //     countDivs[i].innerText = initCount;
            // }



            function BatchSetOnclick(elems, isPlus) {
                for (let i = 0; i < elems.length; i++) {
                    elems[i].onclick = function() {
                        ChangeCurrentCount(isPlus, i);
                    }
                }

            }

            BatchSetOnclick(plusBtns, true);
            BatchSetOnclick(minusBtns, false);

            // for (let i = 0; i < plusBtns.length; i++) {
            //     plusBtns[i].onclick = function () {
            //         ChangeCurrentCount(true);
            //     }
            // }

            // for (let i = 0; i < minusBtns.length; i++) {
            //     minusBtns[i].onclick = function () {
            //         ChangeCurrentCount(false);
            //     }
            // }

            function ItemIndexIfExists(itemName, cItems) {

                for (let i = 0; i < cItems.length; i++) {
                    if (cItems[i].itemName == itemName)
                        return i;
                }

                return -1;
            }

            function ChangeCurrentCount(isPlus, index) {
                const countDiv = countDivs[index];
                const singlePrice = singlePrices[index];
                const itemName = itemNames[index].innerText;
                let myCount = Number(countDiv.innerText);
                let sPrice = Number(singlePrice.innerText);
                if (isPlus) {
                    myCount++;
                    let itemIndex = ItemIndexIfExists(itemName, cartItems);
                    if (itemIndex != -1) {
                        cartItems[itemIndex].count = myCount;

                    } else {
                        let shopcarItem = new MyObj(itemName, sPrice, myCount);
                        cartItems.push(shopcarItem);
                    }
                    RenderCartItems();


                } else {
                    if (myCount > 0) {
                        myCount--;
                        let itemIndex = ItemIndexIfExists(itemName, cartItems);
                        if (itemIndex != -1) {
                            if (myCount == 0) //？
                            {
                                cartItems.splice(itemIndex, 1);
                            } else {
                                cartItems[itemIndex].count = myCount;
                            }


                        }

                        RenderCartItems();
                    }

                }
                totalPrice.innerText = sPrice * myCount;

                // localStorage.setItem("mycount", myCount);
                // for (let i = 0; i < countDivs.length; i++) {

                // }

                //  let divLength = countDivs.length;

                // let nextIndex = (index + divLength / 2) % divLength;
                countDivs[index].innerText = myCount;

                //countDivs[nextIndex].innerText = myCount;

            }
        }

        //  RenderCartItems();
        TestShopCart();
    </script>

    <!-- <script>
        $(".plus").on("click", function () {
            ChangeCurrentCount(true);
        })

        $(".minus").on("click", function () {
            ChangeCurrentCount(false);
        })
        function ChangeCurrentCount(isPlus) {
            var myCount = Number($(".count").first().text());
            if (isPlus) {
                if (myCount == 5) {
                    alert("该产品是特价，至多买5份！！");
                }
                else {
                    myCount++;
                }
            }
            else {
                if (myCount > 0) {
                    myCount--;
                }

            }

            let sPrice = $("#singlePrice").text();
            $(".total-price-span").text(sPrice * myCount);


            $(".count").text(myCount);

        }
    </script> -->

    <!-- 
         <div class="myproductlist">
        <div class="productitem">汉堡：<span id="price">10</span>元 <button id="addbtn">+</button><button
                id="minusbtn">-</button></div>
    </div>


   
    <div id="shopcarlist">

    </div>

    <script>
        var btn = document.getElementById("addbtn");
        var minusbtn = document.getElementById("minusbtn");
        var price = document.getElementById("price");
        var shopcarDiv = document.getElementById("shopcarlist");
        var totalPrice = 0;
        var totalCount = 0;
        btn.onclick = function () {
            var myprice = Number(price.innerText);
            totalCount++;
            totalPrice += myprice;

            shopcarDiv.innerText = "总数量：" + totalCount + ",总价格：￥" + totalPrice + "元";
        }

        minusbtn.onclick = function () {
            if (totalCount == 0) {
                return;
            }


            var myprice = Number(price.innerText);
            totalCount--;
            totalPrice -= myprice;

            shopcarDiv.innerText = "总数量：" + totalCount + ",总价格：￥" + totalPrice + "元";
        }


    </script> -->

</body>

</html>